<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入jquery-->
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>

<body>

<form class="form-horizontal" role="form" id="fmid">
    <div class="form-group">
        <label class="col-sm-2 control-label">规格名称</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="specNames" name="specNames" placeholder="请输入规格名称">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <button type="button" class="btn btn-default" onclick="addbook()" >新增规格 </button>
            <table class="col-sm-12" id="tab">
                <tr>
                    <td class="col-sm-4">规格选项</td>
                    <td class="col-sm-4">排序</td>
                    <td class="col-sm-4">操作</td>
                </tr>
                <tbody id="tobody">
                <tr id="cptr">
                    <td> <input type="text" class="form-control"  name="optionName" placeholder="规格选项"></td>
                    <td> <input type="text" class="form-control"  name="orders" placeholder="规格选项"></td>
                    <td> <button type="button" class="btn btn-default" onclick="deleterow(this)" ><i class="fa fa-file-o"></i>删除</button></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</form>


<script>




    //增加
    function addbook(){
        var cloneRow=$("#cptr").clone();
        $("#tobody").append(cloneRow)
        $(cloneRow).find(":input").val("");
    }

    //删除
    function deleterow(cc){
        var table = cc.parentNode.parentNode.parentNode;
        var td=cc.parentNode.parentNode;
        table.removeChild(td);
    }

</script>


</body>
</html>